<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            padding: 20px 0px 0px 30px;
        }

        thead{
            background-color: skyblue;
        }

        table {
            text-align: center;
            width: 560px;
        }
       .anniu{
        width: 20px;
        background-color: yellow;
       }
       .anniu1{
        background-color: red;
        color: #fff;
        width: 50px;
       }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>商品名称</td>
                <td>数量</td>
                <td>单价</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
</body>

<script src="./jQuery.js"></script>
<script>
    /* 存储商品数组 */
    let goodsArr = [{
            name: '烧烤',
            price: 7,
            quantity: 7
        },
        {
            name: '寿司',
            price: 3,
            quantity: 8
        },
        {
            name: '奶茶',
            price: 6,
            quantity: 9
        },
        {
            name: '大饼卷肉',
            price: 5,
            quantity: 10
        },
        {
            name: '杀猪粉',
            price: 4,
            quantity: 66
        },
        {
            name: '烧刀子',
            price: 4,
            quantity: 88
        },
        {
            name: '水煮鱼',
            price: 4,
            quantity: 99
        },
        {
            name: '花生米',
            price: 4,
            quantity: 66
        },

    ]
    // 添加商品 
    function addWareFn() {
        $("tbody").html("");
        let goodsSum = 0,
            priceSum = 0,
            expensive = 0
        goodsArr.forEach((item) => {
            expensive = expensive < item.price ? item.price : expensive
            goodsSum += item.quantity
            priceSum += item.price * item.quantity
        })

        goodsArr.forEach(function (item, index) {
            $("tbody").append(`
            <tr>
                <td>${index +1}</td>
                <td class='name'>${item.name}</td>
                <td>
                    <input type="button" value="-" class = anniu>
                    <span style>${item.quantity}</span>
                    <input type="button" value="+" class = anniu>
                </td>
                <td>单价:${item.price}</td>
                <td>小计:${item.price * item.quantity}</td>
                <td><input type="button" value="删除"class = anniu1></td>
            </tr>
            `)
        })

        $('tbody').append(`
        <tr>
            <td colspan="6">商品一个${goodsSum}件;共花费${priceSum}元,其中最贵的商品单价是${expensive}元</td>
        </tr>`)
    }
    addWareFn()

    // 删除增减
    $('tbody').click(function (e) {
        let delet = $(e.target)

        if (delet.val() == '-' || delet.val() == '+') {
            let thisName = delet.parent().prev().text()
            /* 获取点击元素在数组里的下标 */
            let i = goodsArr.findIndex((item) => {
                return item.name == thisName
            })
            delet.val() == '-' ? goodsArr[i].quantity-- : goodsArr[i].quantity++
            if(goodsArr[i].quantity <= 0) goodsArr[i].quantity = 0
            addWareFn()
        } else if (delet.val() == '删除') {
            let thisName = delet.parent().parent().children('.name').text()
            /* 获取点击元素在数组里的下标 */

            let i = goodsArr.findIndex((item) => {
                return item.name == thisName
            })
            delet.parent().parent().remove()
            goodsArr.splice(i, 1)
            addWareFn()
        }
    })
</script>

</html>